Performance Observer API: Метрики за производителност по време на изпълнение и анализ на тесни места

В днешната конкурентна дигитална среда производителността на уебсайтовете и уеб приложенията е от решаващо значение за ангажираността на потребителите и успеха на бизнеса. Бавното зареждане и нереагиращите интерфейси могат да доведат до разочаровани потребители, изоставени трансакции и в крайна сметка до загуба на приходи. Performance Observer API е мощен инструмент, който позволява на разработчиците да наблюдават и анализират метрики за производителност по време на изпълнение, да идентифицират тесни места и да оптимизират своите приложения за по-гладко, по-бързо и по-приятно потребителско изживяване, независимо от местоположението или устройството на потребителя.

Какво представлява Performance Observer API?

Performance Observer API е JavaScript API, което предоставя механизъм за наблюдение и реагиране на събития, свързани с производителността, докато те се случват в уеб приложението. За разлика от традиционните техники за наблюдение на производителността, които разчитат на периодично вземане на проби или ръчно инструментиране, Performance Observer API предлага по-ефективен и гъвкав начин за събиране на данни за производителността в реално време. Той позволява на разработчиците да се абонират за конкретни типове записи за производителност (performance entry types) и да получават известия, когато се записват нови такива.

Този подход "наблюдавай и реагирай" позволява проактивно наблюдение на производителността, което дава възможност на разработчиците да идентифицират и решават проблеми с производителността, преди те да повлияят на потребителското изживяване. API-то е стандартизирано в модерните браузъри, което осигурява последователно поведение и съвместимост между различните платформи.

Ключови концепции и характеристики

За да използвате ефективно Performance Observer API, е важно да разберете основните му концепции и характеристики:

• PerformanceEntry: Представлява единично измерване на производителността или събитие. Записите за производителност съдържат информация за типа на събитието, неговото начално и крайно време и други релевантни атрибути. Примерите включват resource, mark, measure, navigation, longtask и event.
• PerformanceObserver: Обект, който ви позволява да се абонирате за конкретни типове записи за производителност и да получавате известия, когато нови записи се добавят към времевата линия на производителността на браузъра.
• observe() метод: Използва се за конфигуриране на PerformanceObserver да слуша за конкретни типове записи за производителност. Можете да посочите типовете записи, които искате да наблюдавате, както и опцията buffered за получаване на исторически записи.
• disconnect() метод: Използва се за спиране на PerformanceObserver да слуша за събития, свързани с производителността.
• takeRecords() метод: Връща масив от всички записи за производителност, които са били наблюдавани, но все още не са обработени от callback функцията на наблюдателя.
• Callback функция: Функция, която се изпълнява, когато се наблюдават нови записи за производителност. Тази функция получава обект PerformanceObserverEntryList, съдържащ наблюдаваните записи.

Поддържани типове записи за производителност (Performance Entry Types)

Performance Observer API поддържа различни типове записи за производителност, като всеки от тях предоставя конкретна информация за различни аспекти на производителността на уеб приложението. Някои от най-често използваните типове записи включват:

• resource: Предоставя информация за зареждането на отделни ресурси, като изображения, скриптове, стилове и шрифтове. Този тип запис включва детайли като URL на ресурса, начално и крайно време, продължителност на извличането и размер на трансфера.
• mark: Позволява ви да създавате персонализирани времеви маркери във вашия код, за да измервате продължителността на конкретни секции от кода. Можете да използвате маркери за проследяване на началото и края на критични операции, като обработка на данни или рендиране на потребителския интерфейс.
• measure: Използва се за изчисляване на продължителността между два маркера. Този тип запис предоставя удобен начин за измерване на производителността на персонализирани секции от кода.
• navigation: Предоставя информация за времето на навигация на страницата, включително време за DNS търсене, време за TCP връзка, време за заявка и отговор и време за обработка на DOM.
• longtask: Идентифицира задачи, които блокират основната нишка за продължителен период от време (обикновено по-дълъг от 50 милисекунди). Дългите задачи могат да причинят липса на реакция на потребителския интерфейс и засичане (jank).
• event: Записва информация за времето на конкретни събития в браузъра, като click, keydown и scroll.
• layout-shift: Проследява неочаквани промени в оформлението (layout shifts) на страницата. Тези промени могат да бъдат дразнещи за потребителите и да се отразят негативно на потребителското изживяване.
• largest-contentful-paint: Измерва времето, необходимо за показването на най-големия елемент със съдържание на страницата.
• first-input-delay: Измерва времето, необходимо на браузъра да отговори на първото взаимодействие на потребителя (напр. кликване или докосване).
• element: Докладва информация за времето на рендиране на конкретни елементи на страницата.

Практически примери и случаи на употреба

Performance Observer API може да се използва в широк спектър от сценарии за подобряване на производителността на уеб приложенията. Ето няколко практически примера:

1. Наблюдение на времето за зареждане на ресурси

Типът запис resource ви позволява да проследявате времето за зареждане на отделни ресурси, като изображения, скриптове и стилове. Тази информация може да се използва за идентифициране на бавно зареждащи се ресурси, които влияят на времето за зареждане на страницата. Например, можете да използвате следния код, за да наблюдавате времето за зареждане на ресурси:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за resource записи и записва URL адреса на ресурса и продължителността в конзолата. Анализирайки тези данни, можете да идентифицирате бавно зареждащи се ресурси и да ги оптимизирате чрез компресиране на изображения, използване на мрежа за доставка на съдържание (CDN) или оптимизиране на конфигурацията на вашия сървър.

Глобална перспектива: Когато наблюдавате времето за зареждане на ресурси, вземете предвид географското местоположение на вашите потребители. Потребителите в региони с по-бавни интернет връзки могат да изпитат значително по-дълго време за зареждане. Използването на CDN с географски разпределени сървъри може да помогне за смекчаване на този проблем.

2. Измерване на времето за изпълнение на персонализиран код

Типовете записи mark и measure ви позволяват да измервате времето за изпълнение на персонализирани секции от код. Това е полезно за идентифициране на тесни места в производителността на логиката на вашето приложение. Например, можете да използвате следния код, за да измерите продължителността на конкретна функция:

            performance.mark("start");

// Code to be measured
for (let i = 0; i < 1000000; i++) {
 // Some computationally intensive operation
}

performance.mark("end");
performance.measure("My Function", "start", "end");

const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Measurement: ${entry.name}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["measure"] });

            

              
                Copy
              
            
          

Този код създава два маркера, start и end, преди и след секцията от код, която искате да измерите. След това използва метода performance.measure(), за да изчисли продължителността между двата маркера. PerformanceObserver слуша за measure записи и записва името на измерването и продължителността в конзолата. Анализирайки тези данни, можете да идентифицирате бавно работещи секции от код и да ги оптимизирате, като използвате техники като кеширане, мемоизация или алгоритмична оптимизация.

Практически съвет: Идентифицирайте критичните пътища на вашето приложение – последователностите от код, които се изпълняват най-често и имат най-голямо въздействие върху производителността. Фокусирайте усилията си за оптимизация върху тези критични пътища, за да постигнете най-значителните подобрения в производителността.

3. Идентифициране на дълги задачи (Long Tasks)

Типът запис longtask идентифицира задачи, които блокират основната нишка за продължителен период. Дългите задачи могат да причинят нереагиращ потребителски интерфейс и засичане (jank), което води до лошо потребителско изживяване. Можете да използвате следния код, за да наблюдавате дългите задачи:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Long Task: ${entry.name}, Duration: ${entry.duration}ms`);
 console.warn(`Long Task Attribution: ${JSON.stringify(entry.attribution)}`);
 });
});

observer.observe({ entryTypes: ["longtask"] });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за longtask записи и записва името на задачата и продължителността в конзолата. Анализирайки тези данни, можете да идентифицирате дълготрайни задачи и да ги оптимизирате, като ги разделите на по-малки части, използвате асинхронни операции или ги прехвърлите на web worker.

Указание за глобално писане: Когато обяснявате технически концепции, използвайте ясен и сбит език, който е достъпен за читатели с различни нива на техническа експертиза. Избягвайте жаргон и предоставяйте контекст за непознати термини.

4. Анализ на времето за навигация (Navigation Timing)

Типът запис navigation предоставя подробна информация за времето на навигация на страницата, включително време за DNS търсене, време за TCP връзка, време за заявка и отговор и време за обработка на DOM. Тези данни могат да се използват за идентифициране на тесни места в процеса на зареждане на страницата. Например, можете да използвате следния код, за да анализирате времето за навигация:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Navigation: ${entry.name}`);
 console.log(`DNS Lookup Time: ${entry.domainLookupEnd - entry.domainLookupStart}ms`);
 console.log(`TCP Connection Time: ${entry.connectEnd - entry.connectStart}ms`);
 console.log(`Request Time: ${entry.responseStart - entry.requestStart}ms`);
 console.log(`Response Time: ${entry.responseEnd - entry.responseStart}ms`);
 console.log(`DOM Processing Time: ${entry.domComplete - entry.domInteractive}ms`);
 });
});

observer.observe({ entryTypes: ["navigation"] });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за navigation записи и записва различни метрики за време в конзолата. Анализирайки тези данни, можете да идентифицирате тесни места като бавно DNS търсене, бавна TCP връзка, бавна обработка на заявки, бавна обработка на отговори или бавна обработка на DOM. След това можете да предприемете подходящи действия за справяне с тези тесни места, като оптимизиране на вашата DNS конфигурация, подобряване на производителността на вашия сървър или оптимизиране на вашия HTML и JavaScript код.

SEO оптимизация: Използвайте релевантни ключови думи естествено в цялото съдържание. В този раздел ключови думи като "време за навигация", "време за DNS търсене", "време за TCP връзка" и "процес на зареждане на страница" са включени безпроблемно.

5. Наблюдение на промени в оформлението (Layout Shifts)

Типът запис layout-shift проследява неочаквани промени в оформлението на страницата. Тези промени могат да бъдат дразнещи за потребителите и да се отразят негативно на потребителското изживяване. Те често се случват поради изображения без зададени размери, реклами, които се зареждат късно, или динамично инжектирано съдържание. Можете да използвате следния код, за да наблюдавате промените в оформлението:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.warn(`Layout Shift: ${entry.name}, Value: ${entry.value}`);
 console.warn(`Layout Shift Had Recent Input: ${entry.hadRecentInput}`);
 console.warn(`Layout Shift Sources: ${JSON.stringify(entry.sources)}`);
 });
});

observer.observe({ entryTypes: ["layout-shift"] });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за layout-shift записи и записва стойността на промяната (резултат, представляващ величината на промяната) в конзолата. По-високата стойност показва по-значителна промяна. Свойството hadRecentInput показва дали промяната е настъпила в рамките на 500ms след въвеждане от потребителя. Промените, предизвикани от въвеждане от потребителя, обикновено се считат за по-малко проблематични. Свойството sources предоставя подробности за елементите, които са причинили промяната. Анализирайки тези данни, можете да идентифицирате и коригирате проблеми с промяната в оформлението, като посочите размери за изображенията, резервирате място за реклами и избягвате динамично инжектиране на съдържание, което може да причини преизчисляване на оформлението (reflows).

Практически съвет: Използвайте инструменти като Lighthouse на Google, за да идентифицирате проблеми с промяната на оформлението и да получите препоръки за тяхното отстраняване. Дайте приоритет на отстраняването на промени, които се случват без въвеждане от потребителя.

6. Измерване на Largest Contentful Paint (LCP)

Типът запис largest-contentful-paint измерва времето, необходимо за показването на най-големия елемент със съдържание на страницата. LCP е основен уеб показател (core web vital), който отразява възприеманата скорост на зареждане на страницата. Добрият LCP резултат е 2.5 секунди или по-малко. Можете да използвате следния код, за да измерите LCP:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Largest Contentful Paint: ${entry.startTime}ms`);
 console.log(`LCP Element: ${entry.element}`);
 console.log(`LCP URL: ${entry.url}`);
 });
});

observer.observe({ entryTypes: ["largest-contentful-paint"] });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за largest-contentful-paint записи и записва началното време, елемента и URL адреса в конзолата. Анализирайки тези данни, можете да идентифицирате най-големия елемент със съдържание и да оптимизирате времето му за зареждане, като оптимизирате размера на изображението, използвате CDN или предварително заредите ресурса.

Глобална перспектива: Имайте предвид, че различните потребители ще имат различни LCP елементи в зависимост от размера на екрана и резолюцията си. Проектирайте приложението си така, че да осигурява добър LCP резултат на различни устройства и размери на екрана.

7. Измерване на First Input Delay (FID)

Типът запис first-input-delay измерва времето, необходимо на браузъра да отговори на първото взаимодействие на потребителя (напр. кликване или докосване). FID е друг основен уеб показател (core web vital), който отразява интерактивността на страницата. Добрият FID резултат е 100 милисекунди или по-малко. Можете да използвате следния код, за да измерите FID:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`First Input Delay: ${entry.processingStart - entry.startTime}ms`);
 console.log(`Event Type: ${entry.name}`);
 console.log(`Target Element: ${entry.target}`);
 });
});

observer.observe({ type: "first-input", buffered: true });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за first-input записи и записва забавянето, типа на събитието и целевия елемент в конзолата. Анализирайки тези данни, можете да идентифицирате причините за дълги забавяния на въвеждането и да оптимизирате своя JavaScript код, за да намалите времето, прекарано в основната нишка.

Практически съвет: Разделете дълготрайните задачи на по-малки части, използвайте web workers, за да прехвърлите задачите на фонова нишка, и оптимизирайте своите event listeners, за да намалите времето за обработка на потребителските взаимодействия.

Разширени техники и съображения

В допълнение към основните случаи на употреба, описани по-горе, Performance Observer API може да се използва в по-напреднали сценарии, за да се получат по-задълбочени познания за производителността на уеб приложенията. Ето няколко разширени техники и съображения:

1. Използване на буфериране

Опцията buffered в метода observe() ви позволява да извличате исторически записи за производителност, които са били записани преди създаването на PerformanceObserver. Това е полезно за събиране на данни за производителността, които се появяват по време на първоначалното зареждане на страницата или преди зареждането на вашия код за наблюдение. Например:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 console.log(`Entry: ${entry.name}, Type: ${entry.entryType}, Duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["navigation", "resource"], buffered: true });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за navigation и resource записи и извлича всички исторически записи, които са били записани преди създаването на наблюдателя.

2. Филтриране на записи за производителност

Можете да филтрирате записите за производителност въз основа на конкретни критерии, за да се съсредоточите върху данните, които са най-релевантни за вашия анализ. Например, можете да филтрирате записи за ресурси въз основа на техния URL адрес или тип съдържание:

            const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach((entry) => {
 if (entry.entryType === "resource" && entry.name.endsWith(".jpg")) {
 console.log(`Image Resource: ${entry.name}, Duration: ${entry.duration}ms`);
 }
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Този код създава PerformanceObserver, който слуша за resource записи и ги филтрира, за да включи само записи за ресурси с изображения с разширение .jpg.

3. Използване на Web Workers

За да избегнете въздействие върху производителността на основната нишка, можете да прехвърлите наблюдението и анализа на производителността на web worker. Това ви позволява да събирате и обработвате данни за производителността във фонов режим, без да блокирате потребителския интерфейс. Например, можете да създадете web worker, който слуша за събития, свързани с производителността, и изпраща данните до основната нишка за анализ.

Указание за глобално писане: Използвайте примери, които са релевантни за глобална аудитория. Избягвайте примери, които са специфични за определена държава или култура.

4. Интеграция с платформи за анализ

Performance Observer API може да се интегрира с платформи за анализ, за да се събират и анализират данни за производителността на централизирано място. Това ви позволява да проследявате тенденциите в производителността във времето, да идентифицирате регресии в производителността и да съпоставяте метрики за производителност с други данни за поведението на потребителите. Можете да изпращате записи за производителност до вашата платформа за анализ, като използвате нейния API или като ги записвате в сървърна крайна точка.

5. Използване на Polyfills за по-стари браузъри

Въпреки че Performance Observer API се поддържа от повечето съвременни браузъри, той може да не е наличен в по-стари браузъри. За да поддържате по-стари браузъри, можете да използвате polyfill, който предоставя резервна имплементация на API-то. Онлайн има няколко налични polyfills, които можете да използвате във вашето приложение.

Най-добри практики за използване на Performance Observer API

За да използвате ефективно Performance Observer API и да избегнете често срещани грешки, следвайте тези най-добри практики:

• Наблюдавайте само метриките, които са релевантни за вашите цели. Избягвайте събирането на прекомерни данни, които могат да повлияят на производителността.
• Използвайте филтриране, за да се съсредоточите върху най-важните данни. Филтрирайте записите за производителност въз основа на конкретни критерии, за да намалите количеството данни, които трябва да обработвате.
• Прехвърлете наблюдението на производителността на web worker. Това ще предотврати въздействието на наблюдението на производителността върху производителността на основната нишка.
• Интегрирайте с платформи за анализ, за да проследявате тенденциите в производителността във времето. Това ще ви позволи да идентифицирате регресии в производителността и да съпоставяте метрики за производителност с други данни за поведението на потребителите.
• Използвайте polyfills, за да поддържате по-стари браузъри. Това ще гарантира, че вашият код за наблюдение на производителността работи в широк спектър от браузъри.
• Тествайте обстойно вашия код за наблюдение на производителността. Уверете се, че вашият код не въвежда сам по себе си проблеми с производителността.
• Бъдете внимателни към разпоредбите за поверителност на данните. Уверете се, че не събирате лична информация (PII) без съгласието на потребителя.

SEO оптимизация: Създайте ангажиращо мета описание. В JSON метаданните е предоставено кратко описание, обобщаващо съдържанието на публикацията в блога.

Заключение

Performance Observer API е мощен инструмент, който позволява на разработчиците да наблюдават и анализират метрики за производителност по време на изпълнение, да идентифицират тесни места и да оптимизират своите уеб приложения за по-гладко, по-бързо и по-приятно потребителско изживяване. Като разбирате ключовите концепции и характеристики на API-то и следвате най-добрите практики за неговото използване, можете да получите ценна информация за производителността на вашите приложения и да предоставите по-добро потребителско изживяване на вашите потребители, независимо от тяхното местоположение или устройство. Тъй като уеб приложенията стават все по-сложни, Performance Observer API ще продължи да бъде основен инструмент за осигуряване на оптимална производителност и удовлетвореност на потребителите.

Не забравяйте да давате приоритет на потребителското изживяване преди всичко. Оптимизацията на производителността винаги трябва да бъде водена от целта за осигуряване на безпроблемно и приятно изживяване за вашите потребители. Като използвате ефективно Performance Observer API, можете да получите по-задълбочено разбиране за производителността на вашето приложение и да вземате информирани решения за подобряване на потребителското изживяване.

Като внимателно обмислят глобалните последици от производителността, разработчиците могат да създават уеб приложения, които са бързи, отзивчиви и достъпни за потребители по целия свят. Това изисква холистичен подход, който взема предвид фактори като латентност на мрежата, възможности на устройствата и културни предпочитания.